<template>
   <div class="goods">
      <div class="menu-wrapper" ref="menuWrapper">
         <ul>
           <li v-for="(item, index) in goods" :key=index class="menu-item" 
           :class="{'current': currentIndex===index}" @click="selectMenu(index, $event)">
              <span class="text">
                 <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
              </span>
           </li>
         </ul>
      </div>
      <div class="foods-wrapper" ref="foodsWrapper">
         <ul>
            <li v-for="(item, index) in goods" :key='index' class="class-list food-list-hook">
               <h1 class="title">{{item.name}}</h1>
               <ul>
                  <li @click="selectdFood(food, $event)" v-for="(food, index) in item.foods" :key='index' class="food-item">
                     <div class="icon">
                        <img height="57px" width="57px" :src="food.icon" alt="">
                     </div>
                     <div class="content">
                        <h2 class="name">{{food.name}}</h2>
                        <p class="desc">{{food.description}}</p>
                        <div class="extra">
                           <span class="count">月售{{food.sellCount}}份</span>
                           <span>好评{{food.rating}}</span>
                        </div>
                        <div class="price">
                           <span class="now">¥{{food.price}}</span>
                           <span class="old" v-show='food.oldPrice'>¥{{food.oldPrice}}</span>
                        </div>
                        <div class="cartcontrol-wrapper">
                           <cartcontrol :food="food"></cartcontrol>
                        </div>
                     </div>
                  </li>
               </ul>
            </li>
         </ul>
      </div>
      <shopcar :selectFoods="selectFoods" :delivery-price="seller.deliveryPrice" 
      :min-price="seller.inPrice"></shopcar>
      <food :food="selectFood" ref="food"></food>
   </div>
   
</template>
<script> 
import BScroll from 'better-scroll'
import shopcar from '../shopcar/shopcar.vue'
import cartcontrol from '../cartcontrol/cartcontrol.vue'
import food from '../food/food.vue'
export default {
   props: {
      seller: {
         type: Object
      }
   },
   data(){
      return {
         goods: [],
         listHeight: [],
         scrollY: 0,
         selectFood: {}
      }
   },
   computed:{
      currentIndex(){
         for(let i=0;i<this.listHeight.length;i++){
            let height1 = this.listHeight[i]
            let height2 = this.listHeight[i+1]
            if(!height2||(this.scrollY >= height1&&this.scrollY<height2)){
               return i
            }
         }
         return 0
      },
      selectFoods(){
         let foods = []
         this.goods.forEach((good) => {
            good.foods.forEach((food) => {
               if(food.count){
                  foods.push(food)
               }
            })
         })
         return foods
      }
   },
   created(){
      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
      this.$http.get('/api/goods').then((response) => {
         response = response.body
         if(response.errno == 0){
            this.goods = response.data 
            this.$nextTick(() => {
               this._initScroll()
               this._calculateHeight()
            })
         }
      })
   },
  components:{
     shopcar,
     cartcontrol,
     food
  },
   methods: {
      selectdFood(food, event){
         if(!event._constructed){
            return 
         }
         this.selectFood = food
         this.$refs.food.show()
      },
      selectMenu(i, event){
         if(!event._constructed){
            return
         }
         let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook')
         let el = foodList[i]
         this.foodsScroll.scrollToElement(el, 300)
      },
      _initScroll(){
         this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
            probeType: 3,
            click: true

         })
         this.meunScroll = new BScroll(this.$refs.menuWrapper, {click:true}) 
         this.foodsScroll.on('scroll', (pos) => {
            this.scrollY = Math.abs(Math.round(pos.y))
         })        
      },
      _calculateHeight(){
         let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook')
         let height = 0
         this.listHeight.push(height)
         for (let i=0; i< foodList.length; i++){
            let item = foodList[i]
            height += item.clientHeight
            this.listHeight.push(height)
         }
         
      }
   }
}
</script>
<style lang="stylus" rel="stylesheet/styles">
   @import "../../common/stylus/mixin"
   .goods
      display: flex
      position absolute
      top 174px
      left 0
      bottom 46px
      width 100%
      overflow hidden
      .menu-wrapper
         flex 0 0 80px
         width 80px
         background #f3f5f7
         .menu-item
            display table
            height 54px
            width 56px
            line-height 14px
            padding 0 12px
            &.current
               position relative
               margin-top -1px
               z-index 10
               
               background #fff 
               .text
                  font-size 14px
                  font-weight 700
                  border none
            .icon
               display inline-block
               width 12px
               height 12px
               vertical-align top
               margin-right 2px
               background-size  12px 12px
               background-repeat no-repeat
               &.description
                  bg-image('decrease_3')
               &.discount
                  bg-image('discount_3')
               &.guarantee
                  bg-image('guarantee_3')
               &.invoice
                  bg-image("invoice_3")
               &.special
                  bg-image("special_3")
               &.decrease
                  bg-image("decrease_3")
            .text
               display table-cell
               width 56px
               vertical-align middle
               border-1px(rgba(7, 17, 27, 0.1))
               font-size 12px
      .foods-wrapper
         flex 1
         .title
            padding-left 14px
            height 26px
            line-height 26px
            border-left 2px solid #d9dde1
            font-size 12px
            color rgb(147, 153, 159)
            background #f3f5f7
         .food-item
            display flex
            margin 18px
            border-1px(rgba(7, 17, 27, 0.1))
            &.last-child
               border-none()
               margin-bottom 0
            .icon
               flex 0 0 57px
               margin-right 10px
            .content
               flex 1
               .name
                  font-size 16px
                  margin 2px 0 8px 0
                  line-height 14px
                  height 14px
                  color rgb(7, 17, 27)
               .desc
                  margin-bottom 8px
                  line-height 10px
                  font-size 10px
                  color gray
               .extra
                  line-height 10px
                  font-size 10px
                  color gray
                  &.count
                     margin-right 12px
               .price
                  font-weight 700
                  line-height 24px
                  .now
                     margin-right 8px
                     font-size 14px
                     color rgb(240, 20, 20)
                  .old
                     color gray
               .cartcontrol-wrapper
                  position absolute
                  right 0
                  bottom 12px

                  

</style>
